<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <title>Registration and Login</title>
  <style>
    /* 自定义样式，可根据需要调整 */
    body {
      background-color: #f4f4f9;
    }

    .form-container {
      max-width: 400px;
      margin: 0 auto;
      padding: 2rem;
      background-color: #ffffff;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .form-title {
      font-size: 1.875rem;
      line-height: 2.25rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .form-input {
      width: 100%;
      padding: 0.75rem;
      margin-bottom: 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.25rem;
    }

    .form-button {
      width: 100%;
      padding: 0.75rem;
      background-color: #3182ce;
      color: #ffffff;
      font-weight: 600;
      border-radius: 0.25rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .form-button:hover {
      background-color: #2b6cb0;
    }

    .form-switch {
      text-align: center;
      margin-top: 1rem;
    }

    .form-switch a {
      color: #3182ce;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div class="flex items-center justify-center h-screen">
    <div class="form-container">
      <h2 class="form-title">Login</h2>
      <form method="post" action="/login">
        <input type="text" class="form-input" placeholder="Username" name="username" />
        <input type="password" class="form-input" placeholder="Password" name="password" />
        <button type="submit" class="form-button">Login</button>
      </form>
      <div class="form-switch">
        <a href="#" onclick="showRegistration()">Register</a>
      </div>
    </div>
    <div class="form-container hidden" id="registration-form">
      <h2 class="form-title">Register</h2>
      <form method="post" action="/register">
        <input type="text" class="form-input" placeholder="Username" name="username" />
        <input type="email" class="form-input" placeholder="Email" name="email" />
        <input type="password" class="form-input" placeholder="Password" name="password" />
        <button type="submit" class="form-button">Register</button>
      </form>
      <div class="form-switch">
        Already have an account? <a href="#" onclick="showLogin()">Login</a>
      </div>
    </div>
  </div>
  <script>
    function showRegistration() {
      document.querySelector('.form-container').classList.add('hidden');
      document.getElementById('registration-form').classList.remove('hidden');
    }

    function showLogin() {
      document.getElementById('registration-form').classList.add('hidden');
      document.querySelector('.form-container').classList.remove('hidden');
    }
  </script>
</body>

</html>
